;(function ($) {
	'use strict';

	var Line = function (element) {
		this.element = element;
		this.canvas = this.element.find('.line-canvas');
		this.resetBtn = this.element.find('.line-reset');
		this.gobackBtn = this.element.find('.line-goback');
		this.lefts = this.element.find('.line-option-left');
		this.rights = this.element.find('.line-option-right');
		this.having = false;
		this.points = [];
		this.num = 0;
		if (!this.having) {
			this.start();
		}
		return this;
	};

	Line.prototype = {
		constructor: Line,

		start: function () {
			var self = this,
				target;
			self.lefts.on('mousemove', function (e) {
				e.preventDefault();
				if (e.which === 1) {
					target = $(this);
					var startX = target.position().left + target.width(),
						startY = target.position().top + target.height() / 2;
					self.points[self.num] = {};
					self.points[self.num].start = [startX, startY];
					self.having = true;
				}
			});	

			self.canvas.on('mousemove', function (e) {
				e.preventDefault();
				if (self.having) {
					if (e.which === 1 && self.points[self.num]) {
						var endX = e.offsetX,
							endY = e.offsetY,
							cW = self.canvas.width(),
							cH = self.canvas.height();
						if (endX > cW * 0.98 || endX < cW * 0.02 || endY > cH* 0.98 || endY < cH * 0.02) {
							self.points.splice(self.num, 1);
							self.draw();
						}
						else {
							self.points[self.num].end = [endX, endY];
							self.draw();	
						}					
					}
				}
			});	

			self.canvas.on('mouseup', function (e) {
				e.preventDefault();
				if (self.having) {
					self.points.splice(self.num, 1);
					self.draw();
					self.having = false;
				}
			});

			self.rights.on('mouseup', function (e) {
				e.preventDefault();
				if (self.having) {
					var $this = $(this),
						endX = $this.position().left,
						endY = $this.position().top + $this.height() / 2;
					self.points[self.num].end = [endX, endY];
					if (target.data('right') !== '') {
						if (target.data('right') === $this.data('num')) {
							self.points.splice(self.num, 1);
							self.draw();
							self.having = false;
						}
						else {
							var index;
							$.each(self.points, function (i, v) {
								if (v.start[1] === self.points[self.num].start[1]) {
									index = i;
									return false;
								}
							});
							target.data('right', $this.data('num'));
							self.points.splice(index, 1);
							self.draw();
							self.having = false;
						}
					}
					else {
						target.data('right', $this.data('num'));
						self.draw();
						self.having = false;
						self.num ++;
					}
				}
			});

			self.gobackBtn.on('click', function (e) {
				e.preventDefault();
				self.goback();
			});

			self.resetBtn.on('click', function (e) {
				e.preventDefault();
				self.reset();
			});

			return self;
		},

		reset: function () {
			var self = this;
			if (self.points.length > 0) {
				self.lefts.data('right', '');
				self.points = [];
				self.num = 0;
				self.draw();
			}
			return self;
		},

		goback: function () {
			var self = this;
			if (self.points.length > 0) {
				var lastPoint = self.points[self.points.length - 1];
				self.lefts.each(function () {
					var $this = $(this),
						y = $this.position().top + $this.height() / 2;
					if (y === lastPoint.start[1]) {
						$this.data('right', '');
					}
				});
				self.points.splice(-1, 1);
				self.num --;
				self.draw();
			}
			return self;
		},

		draw: function () {
			var self = this;
			self.canvas[0].width = self.canvas[0].width;
			var c = self.canvas[0].getContext('2d');
			c.lineWidth = 1.5;
			c.strokeStyle = 'red';
			if (self.points.length > 0) {
				$.each(self.points, function (i, v) {
					c.beginPath();
					c.moveTo(v.start[0], v.start[1]);
					c.lineTo(v.end[0], v.end[1]);
					c.closePath();
					c.stroke();			
				});
			}		
			return self;
		}
	};

	$.fn.line = function () {
		var line = new Line(this);
		return this;
	};

})(jQuery);